<script lang="ts" setup>
import { computed, reactive } from 'vue';
import { COUNTRIES_LIST } from '@/constants/countries';
import { SEX_LIST } from '@/constants/sex';
import { useUserStore } from '@/store/user';
import { useLocale } from '@/locale/locale';
import { isWechat } from '@/utils/platform';

const { t } = useLocale();
const userStore = useUserStore();

const form = reactive({
  firstName: '',
  lastName: '',
  sex: 0,
  countryCode: ''
});

const indexs = reactive({
  sex: 0,
  country: 0
});

const sexName = computed(() => {
  if (form.sex === 0) {
    return '';
  }
  return SEX_LIST[indexs.sex].label;
});

const countryName = computed(() => {
  if (form.countryCode === '') {
    return '';
  }
  return COUNTRIES_LIST[indexs.country].name;
});

function setFirstName(e: any) {
  form.firstName = e.detail.value;
}

function setLastName(e: any) {
  form.lastName = e.detail.value;
}

function setSex(e: any) {
  indexs.sex = e.detail.value;
  form.sex = SEX_LIST[indexs.sex].value;
}

function setCountryCode(e: any) {
  indexs.country = e.detail.value;
  form.countryCode = COUNTRIES_LIST[indexs.country].countryCode;
}
</script>

<template>
  <uni-nav-bar v-if="isWechat()" :border="false" :title="t('JoinMember')" fixed status-bar />
  <view class="flex flex-col justify-between h-screen">
    <view class="join-user__form">
      <view class="mb-3 text-xl text-primary font-medium">
        {{ t('LCKey_joinApartment11member') }}
      </view>
      <view class="mb-7 text-base text-primary font-medium">
        {{ t('LCKey_completeinformation') }}
      </view>
      <!-- 姓 -->
      <view class="join-user__form-item">
        <view class="join-user__form-item-label">
          <text>{{ t('YourLastName') }}</text>
          <text class="is-required">*</text>
        </view>
        <view class="join-user__form-item-value">
          <input
            :placeholder="t('InputYourLastName')"
            class="join-user__form-item-control"
            placeholder-class="join-user__form-item-placeholder"
            @input="setFirstName"
          />
        </view>
      </view>
      <!-- 名 -->
      <view class="join-user__form-item">
        <view class="join-user__form-item-label">
          <text>{{ t('YourFirstName') }}</text>
          <text class="is-required">*</text>
        </view>
        <view class="join-user__form-item-value">
          <input
            :placeholder="t('InputYourFirstName')"
            class="join-user__form-item-control"
            placeholder-class="join-user__form-item-placeholder"
            @input="setLastName"
          />
        </view>
      </view>
      <!-- 性别 -->
      <view class="join-user__form-item">
        <view class="join-user__form-item-label">
          <text>{{ t('LCKey_gender') }}</text>
          <text class="is-required">*</text>
        </view>
        <picker :range="SEX_LIST" :value="indexs.sex" range-key="label" @change="setSex">
          <view class="join-user__form-item-value">
            <view v-if="form.sex === 0" class="join-user__form-item-placeholder">
              {{ t('LCKey_selectYourGender') }}
            </view>
            <view v-else class="join-user__form-item-control">
              {{ sexName }}
            </view>
            <uni-icons color="#adaeb0" size="16" type="right"></uni-icons>
          </view>
        </picker>
      </view>
      <!-- 国家/地区 -->
      <view class="join-user__form-item">
        <view class="join-user__form-item-label">
          <text>{{ t('LCKey_country') }}</text>
          <text class="is-required">*</text>
        </view>
        <picker
          :range="COUNTRIES_LIST"
          :value="indexs.country"
          range-key="name"
          @change="setCountryCode"
        >
          <view class="join-user__form-item-value">
            <view v-if="!form.countryCode" class="join-user__form-item-placeholder">
              {{ t('PleaseSelectYourCountry') }}
            </view>
            <view v-else class="join-user__form-item-control">
              {{ countryName }}
            </view>
            <uni-icons color="#adaeb0" size="16" type="right"></uni-icons>
          </view>
        </picker>
      </view>
    </view>
    <view class="join-user__submit-btn">
      <view class="join-user__submit-btn-inner" @click="userStore.join(form)">
        {{ t('NowJoin') }}
      </view>
      <apt-safe-area></apt-safe-area>
    </view>
  </view>
</template>

<style lang="scss">
.join-user__form {
  padding: 32rpx;
  margin-top: 20rpx;
  border-radius: 20rpx;
  background-color: #fff;

  &-item {
    margin-bottom: 32rpx;
    border-bottom: 2rpx solid #f4f4f4;

    &-label {
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 28rpx;
      line-height: 40rpx;
      color: #3d3d3d;

      .is-required {
        color: #d13820;
      }
    }

    &-value {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 0;
    }

    &-control {
      font-weight: 400;
      font-size: 28rpx;
      line-height: 40rpx;
      color: #3d3d3d;
    }

    &-placeholder {
      font-weight: 400;
      font-size: 28rpx;
      line-height: 40rpx;
      color: #adaeb0;
    }
  }
}

.join-user__submit-btn {
  padding: 32rpx;

  &-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 76rpx;
    border-radius: 9999rpx;
    background-color: #269c74;
    font-weight: 500;
    font-size: 30rpx;
    line-height: 42rpx;
    color: #fff;
  }
}
</style>
